import { ref, onMounted, Ref } from 'vue';
import _ from 'lodash';
import type * as Temp from './type.d';
import type { Canvas, ICollection, StaticCanvas } from 'fabric/fabric-impl';
import * as Type from '@/api/readPathology/readPathology.d';
import useSigns from './useSigns';
import { delLesionData, updateAnnoData } from '@/api/readPathology/readPathology';
import { Message } from '@arco-design/web-vue';

export default function useContentLeftSlide(
    fabricToolCanvas: Ref<any>, 
    fabricCanvas: Ref<Canvas | null>, 
    alrId: Ref<number>, 
    showLesionList: Ref<Temp.NidusList[]>, 
    getInitData: Function,
    lesionResultData: {
        dataList: Type.LesionResultItem[]
    },
    currentSubmenuItem: Ref<string | number>,
) {

    const { menuItemVisibile } = useSigns();

    // 左侧眼睛属性值
    const eyeAllVisibile = ref(true);

    // 左侧列表显示全部显示隐藏事件
    const handleAllEyeClick = (flag: boolean, e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        eyeAllVisibile.value = !flag;
        menuItemVisibile.value = !flag;
        fabricToolCanvas.value.style.display = flag ? 'none' : 'block';
    };

    // 左侧item眼睛事件
    const handleEyeClick = (item: Temp.NidusList, e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        item.disease.eyeStatus = !item.disease.eyeStatus;
        // 获取当前所有活跃的canvas标注对象
        const canvasObjs = window.frabicCanvas?.getObjects()!;
        // 过滤出当前项的canvas活跃对象 用于隐藏元素
        const currentCanvasObjs = canvasObjs!.length >= 1 ? canvasObjs?.filter((t: { id: string | number; }) => t.id === item.disease.id)! : canvasObjs!;
        // 根据eye状态控制添加和移除当前对象并渲染
        currentCanvasObjs[0].set('visible', item.disease.eyeStatus);
        window.frabicCanvas?.renderAll();
    };

    // 左侧item删除事件
    const handleDelClick = async (item: Temp.NidusList, e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        // 获取当前所有的canvas标注对象
        const canvasObjs = window.frabicCanvas?.getObjects();
        // 过滤出当前项的canvas活跃对象 用于改变颜色
        const currentCanvasObjs = canvasObjs!.length >= 1 ? canvasObjs?.filter((t: { id: string | number; }) => t.id === item.disease.id)! : canvasObjs!;
        // 删除当前元素
        window.frabicCanvas?.remove(currentCanvasObjs[0]).renderAll();
        // 病灶中移除当前项
        showLesionList.value = showLesionList.value.filter(item => item.markInfo.id !== currentCanvasObjs[0].id);
        const alrId = item.disease.id;
        const res = await delLesionData(String(alrId));
        Message.success('删除成功！');
        // 根据病灶列表的数据清除当前画布标注
        // window.frabicCanvas?.clear();
        // getInitData();
    };

    // 左侧item颜色变更事件
    const handleColorChange = async (item: Temp.NidusList, value: string) => {
        // 获取当前所有活跃的canvas标注对象
        const canvasObjs = window.frabicCanvas?.getObjects();
        // 过滤出当前项的canvas活跃对象 用于改变颜色
        const currentCanvasObjs = canvasObjs!.length >= 1 ? canvasObjs?.filter((t: { id: string | number; }) => t.id === item.disease.id)! : canvasObjs!;
        currentCanvasObjs[0]?.set({
            stroke: value
        });
        window.frabicCanvas?.renderAll();
        // 获取当前病灶
        // 通过数据得到当前接口返回数据
        const currentResultList = lesionResultData.dataList.filter(it => it.id === item.disease.id);
        const params = {
            alrId: currentResultList[0].id,
            result: currentResultList[0].result,
            color: value
        }
        const res = await updateAnnoData(params);
        Message.success('修改成功！');
        currentSubmenuItem.value = String(currentResultList[0].id);
    }

    return {
        menuItemVisibile,
        eyeAllVisibile,
        handleColorChange,
        handleAllEyeClick,
        handleEyeClick,
        handleDelClick
    };
};